<template>
  <div>
    <!--模糊搜索框区域-->
    <el-card class="box-card" style="height: 70px">
      <el-form :inline="true" :model="searchForm" ref="searchForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="医生姓名" prop="username">
          <el-input size="small" type="text" v-model="searchForm.doctorName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="选择科室" prop="department">
          <el-select v-model="searchForm.department" size="small" placeholder="请选择科室" autocomplete="off">
            <!--            <el-option label="全部" value="all"></el-option>-->
            <el-option label="内科" value="内科"></el-option>
            <el-option label="外科" value="外科"></el-option>
            <el-option label="妇产科" value="妇产科"></el-option>
            <el-option label="儿科" value="儿科"></el-option>
            <el-option label="皮肤科" value="皮肤科"></el-option>
            <el-option label="肿瘤科" value="肿瘤科"></el-option>
            <!-- 根据需要添加更多科室选项 -->
          </el-select>
        </el-form-item>
        <el-form-item label="选择职称" prop="title">
          <el-select v-model="searchForm.title" size="small" placeholder="请选择职称" autocomplete="off">
            <el-option label="主任医师" value="主任医师"></el-option>
            <el-option label="副主任医师" value="副主任医师"></el-option>
            <el-option label="主治医师" value="主治医师"></el-option>
            <el-option label="住院医师" value="住院医师"></el-option>
            <!-- 根据需要添加更多职称选项 -->
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">搜索</el-button>
          <el-button @click="resetForm">重置</el-button>
          <el-button type="primary" @click="handleExport">导出数据</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!--表格区域-->
    <el-card class="box-card">
      <el-table
        :data="doctorList"
        @selection-change="handleSelectionChange"
        style="width: 100%">
        <!--复选框,默认会有事件handleSelectionChange-->
        <el-table-column
          type="selection">
        </el-table-column>
        <el-table-column
          type="index"
          label="序号">
          <template slot-scope="scope">
            {{ (pageNum - 1) * pageSize + scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column
          prop="doctorName"
          label="姓名"
          width="70"
        >
        </el-table-column>
        <el-table-column
          prop="sex"
          label="性别"
          width="70">
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.sex == '1' ? 'primary' : 'success'"
              disable-transitions>{{ scope.row.sex == '1' ? '男' : '女' }}
            </el-tag>
          </template>

        </el-table-column>
        <el-table-column
          prop="phoneNumber"
          label="电话">
        </el-table-column>
        <el-table-column
          prop="hospital"
          label="医院">
        </el-table-column>
        <el-table-column
          prop="department"
          label="科室">
        </el-table-column>
        <el-table-column
          prop="title"
          label="职称">
        </el-table-column>
        <el-table-column
          prop="joinDate"
          label="加入时间">
        </el-table-column>
        <el-table-column
          prop="auditDate"
          label="审核时间">
        </el-table-column>
        <el-table-column
          prop="auditStatus"
          label="审核状态">
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.auditStatus == '0' ? 'info' : scope.row.auditStatus == '1' ? 'success' : 'danger'"
              disable-transitions>{{ scope.row.auditStatus == '0' ? '未审核' : scope.row.auditStatus == '1' ? '审核通过' : '审核未通过'  }}
            </el-tag>
          </template>
        </el-table-column>
        <!--        <el-table-column-->
        <!--          prop="register"-->
        <!--          label="服务状态">-->
        <!--        </el-table-column>-->

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              class="custom-button"
              @click="Check(scope.row)">查看
            </el-button>
            <el-button
              size="mini"
              type="danger"
              class="custom-button"
              @click="Review(scope.row)">审核
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[2, 3, 4, 5]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </el-card>
    <el-dialog
      title="医生审核"
      :visible.sync="dialogVisible"
      width="400px"
    >
      <el-form :model="searchForm">
        <el-form-item label="医生姓名">
          <span>{{ doctormeasure.doctorName }}</span>
        </el-form-item>

        <el-form-item label="服务审核">
          <el-radio-group v-model="searchForm.auditStatus">
            <el-radio :label="1">审核通过</el-radio>
            <el-radio :label="2">审核不通过</el-radio>
          </el-radio-group>
        </el-form-item>

      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm">确认</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
import { getList, updateDoctorAudit } from '@/api/doctors/doctors'

export default {
  name: "",
  data() {
    return {

      doctorList: [],
      ids: [],
      searchForm: {
        auditStatus: null,//审核状态
      },

      pageNum: 1,
      total: 0,
      pageSize: 4,
      dialogVisible: false, // 添加对话框,默认不可见
      doctormeasure: {
        doctorId: '',//医生id
        doctorName: ''//医生姓名
      },
      // title: '添加用户'
    }
  },

  methods: {
// 定义审核状态的方法
    auditStatus () { // 点击确定按钮,发送请求,修改审核状态
      let ids = this.ids;
      let auditStatus = this.doctormeasure.auditStatus; // 审核状态
      console.log(auditStatus);
      axios.post("/doctors/doctors/auditStatus", {
        auditStatus: auditStatus,
      }).then(res => {
        if (res.data.code === 20000) {
        }
      }),
        this.dialogVisible = false; // 关闭对话框
      this.findAllDoctor(); // 刷新页面
    },

    // 打开审核对话框,默认不可见
    Review(row) {
      this.doctormeasure.doctorName = row.doctorName;
      console.log(row.doctorName)
      this.doctormeasure.auditStatus = row.auditStatus;
      this.dialogVisible = true;
    },
    submitForm() {
      console.log('审核状态:', this.form.auditStatus);
      this.dialogVisible = false;
      // 这里可以处理提交审核结果的逻辑
      const auditStatus = this.searchForm.auditStatus;//审核状态
      const doctorId = this.doctormeasure.doctorId;//医生id

      // 发送请求到后端以更新审核状态
      updateDoctorAudit({
        doctorId: this.doctormeasure.doctorId,//医生id
        auditStatus: this.searchForm.auditStatus // 审核状态 0:未审核 1:审核通过 2:审核不通过
      }).then(response => {
        // 处理成功逻辑
        console.log('提交成功', response.data);
        this.dialogVisible = false; // 关闭对话框
      })
        .catch(error => {
          // 处理失败逻辑
          console.error('提交失败', error);
        });

    },


    // 定义查询全部数据的方法
    findAllDoctor() {
      getList({

        pageNum: this.pageNum,
        pageSize: this.pageSize,
        doctorName: this.searchForm.doctorName,
        department: this.searchForm.department,
        title: this.searchForm.title,

      }).then(res => {
        if (res.code === 20000) {
          //this.doctorList = res.data;
          console.log("PageInfo", res.data);// 这是后端返回的PageInfo
          this.doctorList = res.data.list;
          if (this.doctorList.length == 0) {
            this.$message({
              type: "error",
              message: "没有对应数据!"
            })
          }
          this.total = res.data.total;
        } else {
          this.$message({
            message: "查询失败",
            type: "error"
          })
        }
      }).catch(error => {
        this.$message({
          message: "请求失败",
          type: "error"
        })
      })
    },

    // 复选框只要改变,自动触发
    handleSelectionChange(val) {
      let ids = []
      ids = val.map(e => e.id)
      this.ids = ids;
    },
    // 打开查看医生信息对话框
    Check(row) {
      //TODO 查看医生信息逻辑

    },

    handleExport() {
      //TODO 导出数据逻辑
      console.log("导出数据") // 导出数据逻辑
    },
    search() {
      console.log(this.searchForm);
      // 发请求搜索
      axios.get("/user/list",{
        params:this.searchForm
      }).then(res => {
        //console.log(res)
        this.doctorList = res.data
        if (this.doctorList.length == 0){
          this.$message({
            type:"error",
            message:"没有对应数据!"
          })
        }
      })
      //模糊查询全部和直接查询全部区别在于有无参数, 所以将它们封装到一起了
      this.findAllDoctor();
    },
    resetForm() {
      // 重置搜索条件
      this.searchForm = {
        doctorName: '',
        department: '',
        title: '',
      }
      // 查询全部
      this.findAllDoctor()

    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.findAllDoctor();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNum = val;
      this.findAllDoctor();
    }
  },
  created()//页面加载完成后执行 钩子函数
  {
    this.findAllDoctor()
  }
}
</script>

<style scoped>
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  width: 100%;
}
.custom-button {
  padding: 2px 5px; /* 自定义内边距 */
  font-size: 14px; /* 自定义字体大小 */
}
</style>
